<template>
  <div class="header" v-if="shopMess.shop">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="shopMess.shop.shop_avatar"/>
      </div>
      <div class="content">
        <div class="title">{{shopMess.shop.shop_name}}</div>
        <div class="open">{{shopMess.shopinfo.is_open == 1 ? '营业中':'已打烊'}}</div>
        <div class="time">当前{{shopMess.type==1?'房间':'桌子'}}：{{shopMess.name}}</div>
      </div>
    </div>
    <div class="shop-con">
      <div class="shop-con-new">
        公告：{{(shopMess.shop.note==''||shopMess.shop.note==undefined)?'暂无公告':shopMess.shop.note}}
      </div>
      <div class="more" @click="handleShow">更多信息 ></div>
    </div>
    <div class="header-bg">
      <img :src="shopMess.shop.shop_avatar" />
    </div>

    <!-- 查看商家详情 -->
    <transition name="fade">
    <div  v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
          <div class="detail-avatar">
            <img :src="shopMess.shop.shop_avatar" />
          </div>
          <div class="detail-name">{{shopMess.shop.shop_name}}</div>
          <!-- <div>评分</div> -->
          <div class="title">
            <div class="line"></div>
            <div class="text">商家信息</div>
            <div class="line"></div>
          </div>
          <div class="detail-con">
            <div class="con-list">
              <span class="con-list-key">营业时间：</span>
              <span class="con-list-value">{{shopMess.shopinfo.opentime}}</span>
            </div>
            <div class="con-list" v-if="shopMess.shopinfo.contact">
              <span class="con-list-key">电话：</span>
              <span class="con-list-value">{{shopMess.shopinfo.contact}}</span>
            </div>
            <div class="con-list" v-if="shopMess.shop.shop_address">
              <span class="con-list-key">地址：</span>
              <span class="con-list-value">{{shopMess.shop.shop_address}}</span>
            </div>
          </div>

          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="shop-new">{{(shopMess.shop.note==''||shopMess.shop.note==undefined)?'暂无公告':shopMess.shop.note}}</div>
        </div>
      </div>
      <div class="detail-close" @click="handleShow" >
        <i class="iconfont icon-close"></i>
      </div>
    </div >
    </transition>
  </div>
</template>

<script>
export default {
  name: 'DishHeader',
  components: {},
  props: {
    shopMess: Object
  },
  data() {
      return {
        detailShow: false
      }
  },
  methods: {
    handleShow() {
      this.detailShow = !this.detailShow
    }
  }
} 
</script>

<style lang="stylus" scoped>
  .header
    position: relative
    overflow: hidden
    color: #fff
    background: rgba(7, 17, 27, 0.5);
    .content-wrapper
      position: relative
      padding: 20px 12px 18px 20px
      font-size: 0
      .avatar
        display: inline-block
        vertical-align: top
        img
          border-radius: 4px;
          width 1.28rem
          height 1.28rem
      .content
        width 70%
        display: inline-block
        margin-left: 16px
        .title
          margin: 3px 0 0 0
          font-size 0.34rem;
          font-weight bold
        .open
          margin-top 7px
          font-size 0.26rem
        .time
          margin-top 7px
          font-size 0.26rem
    .shop-con
      width 100%
      height 0.6rem
      line-height 0.6rem
      background: rgba(7,17,27,0.2)
      font-size 0.24rem
      padding 0 10px
      .shop-con-new
        width 80%
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        float left
      .more
        float right
    .header-bg
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: -1
      filter: blur(10px)
      img
        width 100%
        height 100%
    .detail
      position: fixed
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      background: rgba(0,0,0,0.8)
      backdrop-filter: blur(10px)
      &.fade-enter-active, .fade-leave-active
        transition: opacity 0.5s
      &.fade-enter, .fade-leave-to
        opacity: 0
      .detail-wrapper
        width: 100%
        min-height: 100%
        .detail-main
          padding-top: 30px
          padding-bottom: 80px
          .detail-avatar
            width 1.28rem
            height 1.28rem
            margin 0 auto
            img 
              border-radius 5px
              width 100%
              height 100%
          .detail-name
            font-size 0.44rem
            text-align center;
            margin 20px auto
          .title
            display: flex
            width: 80%
            margin: 28px auto 24px auto
            .line
              flex: 1
              position: relative
              top: -6px
              border-bottom: 1px solid rgba(255, 255, 255, 0.2)
            .text
              padding: 0 12px
              font-weight: 700
              font-size: 14px
          .detail-con
            width 75%
            margin 0 auto
            font-size 0.26rem
            line-height 0.36rem
            .con-list
              margin-top 0.2rem
              display flex
              .con-list-key
                display inline-block
              .con-list-value
                margin-left 0.1rem
                flex 1
          .shop-new
            font-size 0.25rem
            width 75%
            margin 0 auto
            line-height 0.4rem
      .detail-close
        position: relative
        width: 1rem
        height: 1rem
        line-height 1rem
        margin: -80px auto 0 auto
        clear: both
        text-align center
        i 
          font-size: 0.5rem
</style>